import { Injectable } from '@angular/core';
import * as _ from 'lodash';

@Injectable()
export class DeviceEchartsService {
  // 0:白色；1：黑色
  theme = 0;

  // 法线的去重处理
  markLines = [];

  styles = {
    textColor: ['#222', '#777'],
    lineColor: ['#e8e8e8', 'rgba(13,13,13,0.5)'],
    dashedColor: ['#aaa', '#666'],
  };

  contains(arr, ele) {
    for (const i in arr) {
      if (arr[i] === ele) {
        return true;
      }
    }
    return false;
  }
  // 定制toolTip
  diyToolTip(v, units) {
    let html = '<div>';
    for (let i = 0; i < v.length; i++) {
      let value;
      if (i === 0) {
        html +=
          '<div style=\'font-size:9px;color:#d3d3d3;line-height: 9px;margin-bottom: 6px;margin-top: 4px;\'>' +
          v[i].name +
          '</div><div>';
      }
      if (v[i].data == null) {
        value = '-';
      } else {
        value = v[i].data;
      }
      html +=
        '<div style=\'font-size:9px;color:#777;line-height: 9px;margin-bottom: 3px;\'><span>' +
        v[i].seriesName +
        ':</span><span style=\'font-size:14px;color:' +
        v[i].color +
        '\'>' +
        value +
        '</span><span>' +
        (units[i] || '') +
        '</span></div>';
    }
    html += '</div></div>';
    return html;
  }

  diyxAxis(template, xAxi, xSplitPoints) {
    if (xSplitPoints instanceof Array) {
      const formatter = (index, value) => {
        if (this.contains(xSplitPoints, value)) {
          return true;
        }
      };
      template.splitLine.interval = formatter;
      for (let i = xAxi.data.length - 1; i >= 0; i--) {
        const value = xAxi.data[i];
        if (this.contains(xSplitPoints, value)) {
          const obj = { value: value, textStyle: { color: '#1fb5ff' } };
          xAxi.data.splice(i, 1, obj);
        }
      }
    } else {
      delete template.splitLine;
    }
    template.data = xAxi.data;
    return template;
  }

  deal(data, way) {
    let res;
    res = { dataY: [], units: [], names: [] };
    if (way === 0 || way === 1) {
      res.way = val => {
        return val % 2 === 0;
      };
    }
    if (Array.isArray(data)) {
      data.forEach(item => {
        if (!res.xdata) {
          res.xdata = item.xdata;
        }
        res.dataY.push(item.ydata);
        res.names.push(item.DataName);
        res.units.push(item.Unit);
      });
    }
    return res;
  }

  showDevChart(dataSource) {
    // dataSource = [
    //   {
    //     DataCode: 41,
    //     DataName: 'A相电流',
    //     Unit: 'A',
    //     xdata: [
    //       0,
    //       1,
    //       2,
    //       3,
    //       4,
    //       5,
    //       6,
    //       7,
    //       8,
    //       9,
    //       10,
    //       11,
    //       12,
    //       13,
    //       14,
    //       15,
    //       16,
    //       17,
    //       18,
    //       19,
    //       20,
    //       21,
    //       22,
    //       23,
    //     ],
    //     ydata: [
    //       152.9,
    //       157.7,
    //       118.0,
    //       94.7,
    //       100.8,
    //       98.4,
    //       117.6,
    //       120.5,
    //       117.7,
    //       168.0,
    //       187.0,
    //       203.2,
    //       206.1,
    //       235.8,
    //       178.7,
    //       null,
    //       null,
    //       null,
    //       null,
    //       null,
    //       null,
    //       null,
    //       null,
    //       null,
    //     ],
    //   },
    // ];
    dataSource = this.deal(dataSource, 0);
    return this.setOptions(dataSource);
  }

  setOptions(dataSource) {
    const option = {
      color: ['#12ead5', '#999', '#b078ee'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#1fb5ff',
          },
        },
        backgroundColor: 'rgba(52,52,52,0.88)',
        borderColor: '#515151',
        borderWidth: '1',
        formatter: v => {
          return this.diyToolTip(v, dataSource.units);
        },
      },
      grid: {
        x: 5,
        y: 15,
        x2: 10,
        y2: 18,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: dataSource.xdata,
          splitLine: false,
          axisLabel: {
            interval: dataSource.way || 'auto',
            margin: 4,
            textStyle: {
              color: this.styles.textColor[this.theme],
              fontSize: 7,
            },
          },
          axisLine: { lineStyle: { color: this.styles.lineColor[this.theme] } },
          axisTick: { show: false },
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            margin: 0,
            textStyle: {
              color: this.styles.textColor[this.theme],
              fontSize: 7,
              align: 'right',
              baseline: 'bottom',
            },
          },
          axisLine: { show: false },
          axisTick: { show: false },
          splitNumber: 2,
          position: 'right',
          splitLine: {
            lineStyle: {
              color: this.styles.lineColor[this.theme],
            },
          },
        },
      ],
      series: [],
    };

    dataSource.dataY.forEach(item => {
      item.forEach((val, i) => {
        if (typeof val === 'undefined' || val > +this.markLines[i]) {
          this.markLines[i] = val;
        }
      });
    });

    for (let i = 0; i < dataSource.dataY.length; i++) {
      option.series.push(this.setSeries(dataSource, i));
    }
    return option;
  }

  setSeries(data, index) {
    const lines = [];
    if (index === 0) {
      this.markLines.forEach((item, i) => {
        if (_.isNumber(item) && item > 0) {
          const mode = [
            {
              coord: [i, 0],
            },
            {
              coord: [i, item],
            },
          ];
          lines.push(mode);
        }
      });
    }

    const defaultLine = {
      name: data.names[index],
      type: 'line',
      symbol: 'circle',
      symbolSize: 2,
      data: data.dataY[index],
      itemStyle: {
        normal: {
          lineStyle: { width: 0.8 },
        },
      },
      markLine: {
        data: lines,
        symbolSize: 0,
        lineStyle: {
          normal: {
            color: this.styles.dashedColor[this.theme],
            type: 'dashed',
            width: 0.5,
          },
          emphasis: {
            width: 0,
          },
        },
      },
    };
    return defaultLine;
  }

  // 环图
  showPie(data, params) {
    console.log(data, params);
    const option = {
      title: {
        text: params.text,
        subtext: params.subtext,
        top: params.top || '20%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: '14',
          fontWeight: 'bold',
          color: params.textColor,
        },
        subtextStyle: {
          fontSize: '12',
          fontWeight: 'bold',
          color: params.subtextColor
        }
      },
      series: [{
        name: '环图',
        type: 'pie',
        radius: ['85%', '100%'],
        avoidLabelOverlap: true,
        hoverAnimation: false,
        data: [{
          value: 4950,
          itemStyle: {
            normal: {
              color: params.color
            }
          }
        }, {
          value: 5050,
          itemStyle: {
            normal: {
              color: params.base_color
            }
          }
        }],
        itemStyle: {
          normal: {
            label: {
              show: params.showLabel || false,
              formatter: 40 + '%',
              position: 'center',
              textStyle: {
                fontSize: 12
              }
            },
            labelLine: { show: true }
          }
        }
      }]
    };
      return option;
  }
}
